<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>


</head>
<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->
<div class="box-header with-border">
    <h3 class="box-title">品牌管理</h3>
</div>

<div class="box-body">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#editModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" title="删除" id="deleteCheck"><i
                            class="fa fa-trash-o"></i> 删除
                    </button>
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">

            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">品牌ID</th>
                <th class="sorting">品牌名称</th>
                <th class="sorting">品牌首字母</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="brand">

            </tbody>
        </table>
        <!--数据列表/-->


    </div>
    <!-- 数据表格 /-->
    <form id="page">
        <a href="javascript:toPage(1)">首页</a>
        <a href="javascript:toPage(2)">上一页</a>
        第<input type="text" id="pageNum" size="1px" readonly="readonly">页/
        共<input type="text" id="pages" size="1px" readonly="readonly">页/
        共<input type="text" id="total" size="1px" readonly="readonly">条
        <a href="javascript:toPage(3)">下一页</a>
        <a href="javascript:toPage(4)">末页</a>
    </form>

</div>
<!-- /.box-body -->

<!--增加窗口 -->
<form id="addform">
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">品牌增加</h3>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-striped" width="800px">
                        <tr>
                            <td>品牌名称</td>
                            <td><input class="form-control" name="name" placeholder="品牌名称"></td>
                        </tr>
                        <tr>
                            <td>首字母</td>
                            <td><input class="form-control" name="firstChar" placeholder="首字母"></td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="add()">增加</button>
                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>
</form>
<!--回显窗口-->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <form id="updateform">

    </form>
</div>
</body>
</html>
<script>
    $(function () {
        getAll();
    })

    function getAll(num) {
        $.ajax({
            url: "/brand/getAll",
            dataType: "json",
            data: {pageNum: num},
            type: "get",
            async: false,
            success: function (result) {
                if (result.code == "666") {
                    var data = result.data.rows;
                    var html = '';
                    $(data).each(function (i, e) {
                        html += '<tr>'
                        html += '<td><input type="checkbox" value="' + e.id + '"></td>'
                        html += '<td>' + e.id + '</td>'
                        html += '<td>' + e.name + '</td>'
                        html += '<td>' + e.firstChar + '</td>'
                        html += '<td className="text-center">'
                        html += '<button type="button" className="btn bg-olive btn-xs" data-toggle="modal" data-target="#updateModal" onclick="getById(' + e.id + ')">修改'
                        html += '</button>'
                        html += '</td>'
                        html += '</tr>'
                    });
                    $("#brand").html(html);
                    //分页
                    $("#pageNum").val(result.data.pageNum)
                    $("#pages").val(result.data.pages)
                    $("#total").val(result.data.total)
                }
            }
        })
    }

    //分页
    function toPage(id) {
        var num = parseInt($("#pageNum").val())
        var pages = parseInt($("#pages").val())
        var p = num;
        if (id == 1) {
            if (num <= 1) {
                alert("已经是首页");
                return;
            }
            p = 1;
            $("#pageNum").val(1);
        }
        if (id == 2) {
            if (num == 1) {
                alert("已经是首页")
                return;
            }
            p = num - 1;
            $("#pageNum").val(num - 1);
        }
        if (id == 3) {
            if (num == pages) {
                alert("已经是尾页")
                return;
            }
            p = num + 1;
            $("#pageNum").val(num + 1);
        }
        if (id == 4) {
            if (num == pages) {
                alert("已经是尾页")
                return;
            }
            p = pages
            $("#pageNum").val(pages);
        }
        getAll(p);
    }

    function add() {
        $.ajax({
            url: "/brand/insert",
            data: $("#addform").serialize(),
            dataType: "json",
            type: "post",
            async: false,
            success: function (result) {
                if (result.code == "666") {
                    alert(result.message);
                    getAll();
                } else {
                    alert(result.message);
                }
            }, error: function (result) {
                alert("增加失败");
            }
        })
    }

    //回显
    function getById(id) {
        $.ajax({
            url: "/brand/getById/" + id,
            type: "post",
            data: {},
            async: false,
            dataType: "json",
            success: function (r) {
                if (r.code == "666") {
                    var html = '';
                    html += ' <div class="modal-dialog" >' +
                        '<div class="modal-content">' +
                        '<div class="modal-header">' +
                        '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
                        '<h3 id="myModalLabel">品牌修改</h3>' +
                        '</div>' +
                        '<div class="modal-body">' +
                        '<table class="table table-bordered table-striped"  width="800px">' +
                        '<input type="hidden" name="id" id="id" value="' + r.id + '">' +
                        '<tr>' +
                        '<td>品牌名称</td>' +
                        '<td><input  class="form-control" placeholder="品牌名称" id="name" name="name" value="' + r.name + ' "> </td>' +
                        '</tr>' +
                        '<tr>' +
                        '<td>首字母</td>' +
                        '<td><input  class="form-control" placeholder="首字母" id="firstChar" name="firstChar" value="' + r.firstChar + '">  </td>' +
                        '</tr>' +
                        '</table>' +
                        '</div>' +
                        '<div class="modal-footer">' +
                        '<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="update()">修改</button>' +
                        '<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>' +
                        '</div>\n' +
                        '</div>\n' +
                        '</div>'
                    $("#updateform").html(html);
                    $("#id").val(r.data.id);
                    $("#name").val(r.data.name);
                    $("#firstChar").val(r.data.firstChar);
                } else {
                    alert(r.message);
                }

            },
            error: function (result) {
                alert("回显失败!!!")
            }
        })
    }

    function update() {
        var id =$("[name=id]").val();
        var name =$("[name=name]").val();
        var firstChar=$("[name=firstChar]").val();
        $.ajax({
            url: "/brand/update",
            data: $("#updateform").serialize(),
            dataType: "json",
            async: false,
            type: "post",
            success: function (r) {
                if (r.code == "666") {
                    alert(r.message)
                    getAll();
                }else {
                    alert(r.message)
                }
            }, error: function (r) {
                alert("修改失败!!!")
            }
        })
    }

    $(function () {
        $("#deleteCheck").click(function () {
            var ids = [];
            $("[type=checkbox]").each(function (i, v) {
                if (v.checked) {
                    ids.push(v.value);
                }
            })
            if (ids.length > 0) {
                if (confirm("确认要删除吗??")) {
                    $.ajax({
                        url: "/brand/deleteCheck?ids=" + ids,
                        data: {ids: ids},
                        dataType: "json",
                        async: false,
                        type: "post",
                        success: function (r) {
                            if (r.code === "666") {
                                alert(r.message)
                                location.reload();
                            }else {
                                alert(r.message)
                            }
                        },
                        error: function (r) {
                            alert("修改失败")
                        }
                    })
                }
            } else {
                alert("选中要删除的");
            }
        })
    })
</script>